<template>
	<view>
		<u-navbar title="开通VIP" back-icon-color="#ffffff" title-color="#ffffff" :background="{backgroundColor:'#333333'}" :border-bottom="false">
		</u-navbar>
		<view class="p-head">
			<u-avatar size="large" :src="userInfo.avatarUrl||'/static/assets/images/default_head.png'"></u-avatar>
			<view class="u-m-l-10 u-flex-1">
				<view class="u-flex">
					<text class="u-m-r-10 u-font-xl u-line-1" :class="{'text-vip':userInfo.vip}" style="max-width: 10em;">{{userInfo.userName||'登录/注册'}}</text>
					<image v-if="badge" class="u-m-l-10 vip-badge" :src="badge" mode="aspectFit"></image>
					<!-- <view class="cu-tag round sm bg-grey" v-if="isLogin">
						<text>V0</text>
					</view> -->
				</view>
				<view class="u-m-t-5">
					<text class="u-font-20 text-gray">{{userInfo.vip?`有效期至：${userInfo.vipEndDate.slice(0,10)}`:'开通VIP获取专属权限'}}</text>
				</view>
			</view>
			<view v-if="!isLogin" class="u-m-l-10 cu-tag p-bg-y-gradu round" @tap="jumpTo('/pages/login/login')">
				<text class="p-f-y-d">立即登录</text>
			</view>
		</view>
		<view class="bg-black">
			<view class="tab-wrap">
				<view v-for="(item,index) in packs" class="tab" :key="item.levelCode" :class="{active:pIdx == index}"
					@tap="tabChange(index)">
					<text>{{item.levelName}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white">
			<scroll-view scroll-x="true" v-for="(pack,i) in packs" :key="i" v-if="pIdx==i"
				style="white-space: nowrap;">
				<view class="pack" @tap="changeLeve(j)" :class="{cur:subIdx==j}" v-for="(leve,j) in pack.leveList" :key="leve.id">
					<view class="title ">
						{{leve.name}}
					</view>
					<view class="u-flex u-col-bottom u-m-10 p-f-y-d">
						<text>￥</text>
						<text class="text-bold price">{{leve.price}}</text>
					</view>
					<view>
						<text class="text-gray" :class="{'text-del':leve.originalPrice}">{{leve.originalPrice||'&nbsp;'}}</text>
					</view>
					<!-- <view class="top">
						新人特惠
					</view> -->
				</view>
			</scroll-view>
		</view>

		<view class="u-m-t-20 bg-white">
			<view @tap="curMode=index" v-for="(mode,index) in modes" :key="index"
				class="u-flex u-col-center u-p-20 u-p-r-30 u-p-l-30">
				<view class="iconfont pay-icon" :class="mode.class"></view>
				<view class="u-flex-1 u-m-l-20">
					<view class="text-black u-font-lg flex-start">{{mode.name}}支付 <text v-if="payExt[mode.key].recom" class="pay-recom">推荐</text></view>
					<view v-if="payExt[mode.key].des" class="u-font-xs text-gray">{{payExt[mode.key].des}}</view>
				</view>
				<view class="p-radio" :class="{checked:modes[curMode].key==mode.key}"></view>
			</view>
		</view>
		
		<view class="u-m-t-20 u-p-30 bg-white">
			<u-section title="会员特权"  :right="false"></u-section>
			<u-grid :col="4" :border="false" hover-class="none">
				<u-grid-item v-for="item in curPack.ruleList" :key="item.id">
					<!-- <u-icon name="photo" :size="46"></u-icon> -->
					<image class="privilege-icon" :src="item.iconUrl" mode="aspectFill"></image>
					<view class="text-gray u-m-t-10">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-gap height="200" bg-color="#f0f0f0"></u-gap>
		<view class="cu-bar foot padding-lr bg-white solid-top">
			<view class="flex align-end ">
				<text class="u-font-30">合计:</text>
				<text class="u-font-40 p-f-y">￥{{curLeve.price}}</text>
			</view>
			<view class="cu-btn round p-bg-y-gradu lg" @tap="submit">
				<text class="p-f-y-d">确认支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {unauthPath} from "@/utils/constant.js"
	import {jumpTo,delay} from "@/utils/util.js"
	import * as vipAPI from "@/api/vip.js"
	import {getRule,CODES} from "@/utils/vip.js"
	import payAPI,{payModes} from "@/api/pay.js"
	import {mapGetters,mapActions} from "vuex"
	
	export default {
		data() {
			return {
				packs:[],
				pIdx:0,
				subIdx:0,
				payExt:{
					1:{des:'10亿用户都在用，真安全，更放心',recom:true},
					2:{des:'',recom:false},
					3:{des:'',recom:false},
				},
				modes: Object.values(payModes),
				curMode: 0
			}
		},
		computed:{
			...mapGetters('user',['isLogin','userInfo']),
			curPack(){
				return this.packs[this.pIdx]||{}
			},
			curLeve(){
				return this.curPack.leveList&&this.curPack.leveList[this.subIdx]||{}
			},
			badge(){
				return getRule(this.userInfo&&this.userInfo.vipLevelCode,CODES.HEAD_TAG)
			}
		},
		async onLoad() {
			this.packs = await vipAPI.getVipConfigs();
		},
		async onPullDownRefresh() {
			try{
				await this.fetchUserInfo()
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		methods: {
			...mapActions('user',['fetchUserInfo']),
			jumpTo,
			tabChange(index) {
				this.pIdx = index
				this.subIdx = 0
			},
			changeLeve(index){
				this.subIdx = index
			},
			modeChange(index) {
				this.curMode = index
			},
			
			async submit(){
				
				if(!this.isLogin){
					return jumpTo(unauthPath)
				}
				try {
					if (this.submit.lock) {
						throw new Error('请求处理中')
					}
					this.submit.lock = true;
					await payAPI.openVip({userId:this.userInfo.userId,vipId:this.curLeve.id,payplatForm:this.modes[this.curMode].key});
					// #ifdef H5
					await new Promise((resolve, reject) => {
						uni.showModal({
							content: '您是否已完成支付',
							cancelText: '未完成',
							confirmText: '已完成',
							success({
								confirm
							}) {
								confirm ? resolve() : reject()
							},
							fail: reject
						})
					})
					// #endif
					uni.showToast({
						title:'支付成功'
					})
					await delay(1000)
					this.fetchUserInfo()
				} catch (e) {
					console.error(e)
				} finally {
					this.submit.lock = false;
				}
			
			}
		}
	}
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	$yellow:#d8a732;
	$yellow-dark:#82571f;
	$yellow-light:#f9e3a1;

	.p-radio {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 4rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: center;

		&.checked {
			background-color: $yellow;
			color: #FFFFFF;
			border-color: $yellow;

			&::before {
				content: "\e645";
				font-family: "cuIcon";
				font-size: 30rpx;
			}
		}
	}

	.p-bg-y-l {}

	.p-bg-y-gradu {
		background-image: linear-gradient(90deg, $yellow-light, $yellow);
	}

	.p-f-y {
		color: $yellow;
	}

	.p-f-y-d {
		color: $yellow-dark;
	}

	.p-head {
		background-color: #333333;
		
		display: flex;
		align-items: center;
		padding: 60rpx 20rpx;
		color: #FFFFFF;
	}

	.pack {
		display: inline-flex;
		margin: 40rpx 30rpx;
		width: 220rpx;
		height: 250rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 4rpx solid #EEEEEE;
		padding: 4rpx;
		border-radius: 20rpx;
		position: relative;
		.title{
			white-space: normal;
			text-align: center;
			font-weight: bold;
		}
		.top {
			position: absolute;
			left: -4rpx;
			top: -22rpx;
			height: 40rpx;
			font-size: 20rpx;
			background-image: linear-gradient(90deg, #ec5829, #ef8a64);
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 16rpx;
			border-radius: 20rpx 20rpx 20rpx 0;
		}

		.price {
			font-size: 50rpx;
		}

		&.cur {
			border-color: $yellow;
			background-color: rgba($color: $yellow-light, $alpha: 0.15);
			box-shadow: 0 0 15px rgba($color: $yellow-light, $alpha: 0.2);
		}

		&+.pack {
			margin-left: 0;
		}
	}

	.tab-wrap {
		display: flex;
		align-items: flex-end;
		border-radius: 30rpx 30rpx 0rpx 0;
		background-color: #656565;
		height: 80rpx;

		.tab {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 80rpx;
			padding-bottom: 14rpx;
			font-size: 30rpx;
			border-radius: 30rpx 30rpx 0rpx 0;

			&.active {
				background-color: #FFFFFF;
				color: #000000;
				height: 90rpx;
			}
		}
	}
	.privilege-icon{
		height: 80rpx;
		width: 80rpx;
	}
	.pay-icon{
		font-size: 70rpx;
	}
	.pay-recom{
		$color:#dd6f40;
		font-size: 20rpx;
		margin-left: 16rpx;
		padding: 2rpx 8rpx;
		border-radius: 6rpx;
		background-color: $color;
		color: #FFFFFF;
		position: relative;
		&::before{
			content: "";
			display: block;
			border: 6rpx solid transparent;
			border-bottom-color: $color;
			border-left-color:$color;
			position: absolute;
			left: 0rpx;
			top: 50%;
			transform: translate(-50%,-50%) rotate(45deg);
		}
	}
</style>
